<template>
  <div id="login">
    <div style="height: 120px"></div>
    <div class="loginForm" >
      <el-form ref="form"  label-position="center" :rules="rules" :model="form">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password" minlength="8"></el-input>
        </el-form-item>
        <el-form-item prop="password2">
          <el-input v-model="form.password2" placeholder="请确认密码" type="password" minlength="8"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  round style="width: 100%" @click="register('form')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    var checkUsername = (rule,val,callback)=>{
      if (val === ''){
        callback(new Error('请输入用户名'));
      }else {
        callback();
      }
    };
    var checkPassword = (rule,value,callback)=>{
      if (value === ''){
        callback(new Error('请输入密码'));
      }else{
        if (this.form.password2 !== ''){
          this.$refs.form.validateField('password2');
        }
      }callback();
    };
    var checkPasswordTo = (rule,value,callback)=>{
      if (value === ''){
        callback(new Error('请再次输入密码'))
      }else if (value !== this.form.password){
        callback(new Error('两次输入密码不一致'));
      }else {
        callback();
      }
    };
    return {
      loading:false,
      form:{
        username:'',
        password:'',
        password2:'',
      },
      rules:{
        username:[{validator: checkUsername,trigger:'blur'} ],
        password:[{validator:checkPassword,trigger:'blur'}],
        password2:[{validator:checkPasswordTo,trigger:'blur'}]
      },
      account : '',
      password : '',
      messageRule:{
        showClose:true,
        center:true,
        duration:2000
      }
    }
  },
  methods:{
    //注册
    register(formName){
      this.$refs[formName].validate((valid)=>{
        if (valid){
          this.axios.post('api/login/createAccount',{
            username:this.form.username,
            password:this.form.password
          })
            .then(res=>{
              if (res.data.code===201){
                this.$message({
                  ...this.messageRule,
                  type:'error',
                  message:res.data.message
                })
              }else {
                sessionStorage.setItem('id',res.data.id)
                this.$message({...this.messageRule,message:res.data.message,type:'success'});
                this.$router.replace('./login')
              }
            }).catch(err=>{
              console.log(err)
            });
        }
      })
    },
  }
}
</script>
<style>
  #login{
    height: 100%;
    background: url("../assets/image/true.jpg") no-repeat;
    background-size: 100% 98%;
  }
  .loginForm{
    width: 400px;
    /*padding-top: 120px;*/
    margin: 0 auto;
    padding: 20px 40px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: rgba(22, 52, 80, 0.14) 5px 5px;
  }
  .register{
    font-size: 14px;
    line-height: 22px;
    color: #1ab2ff;
    cursor: pointer;
    text-align: center;
    text-indent: 8px;
    margin: 0 auto;
  }
</style>
